<template>
  <transition 
    name="dialog"
    enter-class="dialogIn"
    leave-active-class="dialogOut"
  >
    <div class="dialog-wrapper" v-if="isDialog">
      <div class="dialog-box">
        <h3 class="dialog-header">{{dialog.title}}</h3>
        <div class="dialog-body">
          <p>{{dialog.contents}}</p>
        </div>
        <div class="dialog-footer">
          <!-- <a class="ake_btn dialog-close close" v-if="dialog.btnGroup[1]" @click="cancel">{{dialog.btnGroup[1]}}</a>
          <a class="dialog-yes yes" @click="confirm">{{dialog.btnGroup[0]}}</a> -->
          
          <button class="ake_btn ake_btn_text dialog-close close" v-if="dialog.btnGroup[1]" @click="cancel">{{dialog.btnGroup[1]}}</button>
          <button class="ake_btn ake_btn_blue dialog-yes yes" v-if="dialog.btnGroup[0]" @click="confirm">{{dialog.btnGroup[0]}}</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters({
      isDialog: 'getIsDialog',
      dialog: 'getDialog'
    })
  },
  methods: {
    ...mapMutations({
      dialogToggle: 'DIALOG_TOGGLE'
    }),
    confirm () {
      if(this.dialog.confirmCallback) {
        this.dialog.confirmCallback();
      }
      this.dialogToggle(false);
    },
    cancel () {
      if(this.dialog.cancelCallback) {
        this.dialog.cancelCallback();
      }
      this.dialogToggle(false);
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/less/base/variables.less';
.dialogIn, .dialogOut{
  opacity: 0;
  .dialog-box {
    transform: scale(0.4);
  }
}
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 15%;
  background-color: rgba(0, 0, 0, .4);
  z-index: 3000;
  transition: all .2s ease;
  .dialog-box {
    min-width: 340px;
    max-width: 400px;
    background-color: #FFF;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all .2s ease;
  }
  .dialog-header, .dialog-footer {
    height: 50px;
    line-height: 50px;
    color: @white;
  }
  .dialog-header {
    width: 100%;
    text-align: center;
    border-radius: 4px 4px 0 0;
    background-color: lighten(@blue, 5%);
    padding-left: @spacing * 2;
    padding-right: @spacing * 2;
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
  }
  .dialog-body {
    width: 100%;
    min-height: 130px;
    padding: 20px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 30px;
    // margin-bottom: 20px;
    font-size: 16px;
    text-align: center;
    p {
      margin-bottom: 8px;
      letter-spacing: 1px;
    }
  }
  .dialog-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 40px;
    padding-right: 40px;
    border-top: 1px solid @greydd;
    .ake_btn + .ake_btn {
      margin-left: 18%;
    }
    // a {
    //   flex: 1;
    //   color: @blue;
    //   padding: 12px;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   font-size: 16px;
    //   letter-spacing: 4px;
    //   cursor: pointer;
    //   + a {
    //     border-left: 1px solid @greydd;
    //   }
    //   &.close {
    //     color: @red;
    //   }
    // }
    
  }
}
</style>
